So far, we've been working within the confines of an app window, but of course, apps can occupy other
areas of the operating system as well.
The most common being some sort of global icon tray or taskbar on Mac.
We find it here top right of the screen.
Same for Ubuntu Linux or bottom right on Windows.
Electrons tray module, then allowing us to add our app to such taskbar as an app has two ways of using
the taskbar entry, the first being to attach a menu to it and the second being to simply listen for
various clicks on the taskbar icon.
Let's see examples of both.
I'll start by requiring the module, this exposing the trade class.
So capital tray and then in order to create and use the tray instant, we'll have to create a global
reference to the tray instance exactly as we do for the browser window.
I'll add a global variable tray and a new function responsible for creating and configuring our applications.
Tray instance, create tree in which we can assign to the global tray variable new tree.
This constructor taking a single argument being the path to the tree icon.
Now this icon image we pass in here gets converted to a native image object, something we'll cover
in a later lesson.
But essentially it means we can configure the image just like a native app image by means of its name.
For example, if we look at the documentation for Electron's native image, we see appending at two,
three or four X to an image will allow us to provide larger images for high resolution displays.
This being a topic in itself.
But I've linked to some good resources.
Should you wish to have a read, then we can also prefix the keyword template to provide a template
image instead of a standard image template.
Images, basically meaning the operating system will fill all of the available pixels in the icon with
the correct color.
Based on the operating systems color scheme, you'll need an image with a transparent background.
Then I'll add my icon tray template at two X and set the path to that tree icon image.
So this name basically meaning display the icon at twice the resolution and make it a template icon,
Mark takes a 16 by 16 pixel image for its standard taskbar.
So at twice the resolution, this image is 32 by 32 pixels.
That's all we need to create the tri entry.
So test this not forgetting to call create tray.
Once the app is ready, I'll just do it in create window for now.
Just easier save.
And there we see the icon I used for the tree, if you check the image in the lesson resources, you'll
see it's a solid black icon, but being declared a template image, Mac OS has made the icon white in
order to fit with my dark theme.
At the moment, this icon does nothing, though, not even letting us know what it is.
So let's fix that with a tooltip to add a simple tooltip message to a tree icon.
We can say tree set, tooltip passing it.
The message to display in the tooltip tree details save.
Hover over the icon.
And there we get that tooltip next, we can add some functionality.
Remember I said we have two ways to use the tray instance, the first being using this icon only and
listening for clicks, right.
Clicks or even clicks with modifier keys like shift alt, etc., you can find a comprehensive list of
events in the tray documentation, including some platform specific ones, like dropping files on the
tray icon.
For now, let's add a simple click listener tray on click, providing us a callback with the click event
in which I'll toggle the main window visibility each time the tray icon has clicked first checking if
my window is visible with main window is visible.
Using a ternary operator, if true, so visible call main window dot hide, else call main window dot
show.
Click the dry icon and gone with each click toggling main window between visible and hidden.
We can also check for modifier keys on any of these click events.
If e the click event dot shift key, meaning the shift key was pressed down when the click happened,
call up dot quit.
Do the visibility toggle as before?
So now clicking the icon will do what we just saw show and hide it, but holding shift and clicking
the icon will quit the app.
Save.
Perform a normal click.
That works as before, but hold down, shift with a click and gone, the app quits.
So that's the first way of using a tray instance with variations of clicks.
The second is to add a menu to the icon, exactly as in the previous lessons.
I'll require the menu module or class creating in the global scope a new menu called tray menu.
With the menu classes built from template method calling menu dot pulled from template in which I'll
create a menu item with a label of item one.
And a second menu item with a roll configuration of quitte.
Finally applying this menu to the tray icon with tray, dot, set context, menu, tray menu.
Save and now when I click this icon instead of the click listener firing, we see that two menu items
with the control giving us this, quote, most electron entry, the electron being the name of the app
taken from the package that JSON file click and the app quits.
So as with any menu, the possibilities are endless.
Do note though, I purposely left this click listener in place, but with the menu being added, this
is now ignored.
So always one or the other.